<!--
  #%L
  thinkbig-ui-operations-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->

<div class="feed-stats">
  <div layout="column" ng-if="vm.dataLoaded" layout-padding>


      <md-card layout-align="center center">
        <md-card-content layout="column" style="width:100%;">
          <div layout="row" class="layout-padding-left">
            <span flex layout-align="end top" class="md-button-group layout-padding feed-stats-filter" layout-padding>
              <md-button flex="none" class="border-btn small" ng-repeat="opt in vm.timeFrameOptions track by opt.value" ng-class="{'selected': vm.timeFrame == opt.value}"
                         ng-click="vm.onTimeFrameClick(opt.value)">{{opt.label}}</md-button>
            </span>
            <span flex></span>
            <div layout="column">
              <div layout="column" class="layout-padding-right">
                <span class="hint">{{vm.lastRefreshTime | date:'HH:mm:ss'}}</span>
                <span class="md-caption">最后刷新</span>
              </div>
              <div flex="20" class="md-block layout-padding-top-bottom" ng-if="vm.showProcessorChartLoading || vm.showFeedTimeChartLoading">
                <div layout="column">
                  <md-progress-linear md-mode="indeterminate"></md-progress-linear>
                </div>

              </div>


            </div>

          </div>

        </md-card-content>
      </md-card>

    <div ng-if="vm.feedProcessorErrors.visibleData.length >0">
      <md-card>
      <md-toolbar class="md-table-toolbar md-default" layout="column">
        <div class="md-toolbar-tools">
          <span>错误信息</span>
          <span flex="5"></span>
          <div flex style="margin-top:25px">
          <md-input-container flex layout-fill>
            <label>过滤</label>
            <input ng-model="vm.feedProcessorErrorsTable.filter" ng-model-options="{debounce:1000}"/>
          </md-input-container>
          </div>
          <span flex="5"></span>
          <div layout="column" layout-align="end end">
             <div layout="row">
          <md-switch class="md-primary" md-no-ink aria-label="Auto Refresh" ng-model="vm.feedProcessorErrors.autoRefresh" ng-change="vm.toggleFeedProcessorErrorsRefresh(vm.feedProcessorErrors.autoRefresh)">
            自动刷新： {{vm.feedProcessorErrors.autoRefreshMessage}}
          </md-switch>
          <md-button class="md-icon-button" ng-if="vm.feedProcessorErrors.autoRefresh == false" ng-click="vm.viewNewFeedProcessorErrors()">
            <ng-md-icon icon="refresh"></ng-md-icon>
          </md-button>
             </div>
            <span ng-if="vm.feedProcessorErrors.newErrorCount >0" class="hint" style="padding-bottom: 10px;margin0--top:-10px;"> {{vm.feedProcessorErrors.newErrorCount}} new errors exist.</span>
          </div>
        </div>
      </md-toolbar>

      <md-table-container ng-if="vm.feedProcessorErrors.visibleData.length >0">
        <table md-table >
          <thead md-head md-order="vm.feedProcessorErrorsTable.sortOrder">
          <tr md-row>
            <th md-column name="Processor" md-order-by="processorName"><span>处理器</span></th>
            <th md-column name="Errors" md-order-by="errorMessages"><span>错误</span></th>
            <th md-column name="Time" md-order-by="errorMessageTimestamp" md-desc><span>时间</span></th>
          </tr>
          </thead>
          <tbody md-body>
          <tr md-row
              ng-repeat="item in vm.feedProcessorErrors.visibleData | filter: vm.feedProcessorErrorsTable.filter | orderBy:  vm.feedProcessorErrorsTable.sortOrder | limitTo: vm.feedProcessorErrorsTable.rowLimit : (vm.feedProcessorErrorsTable.page -1) * vm.feedProcessorErrorsTable.rowLimit"  >
            <td md-cell>{{item.processorName}}</td>
            <td md-cell>{{item.errorMessages}}</td>
            <td md-cell>{{item.errorMessageTimestamp | date:'HH:mm:ss'}}</td>
          </tr>
          </tbody>
        </table>
      </md-table-container>
        <md-table-pagination md-limit="vm.feedProcessorErrorsTable.rowLimit" md-limit-options="[5,10,15,20,50,100]" md-page="vm.feedProcessorErrorsTable.page" md-total="{{vm.feedProcessorErrors.visibleData.length}}" md-page-select="true" md-boundary-links="false"></md-table-pagination>
    </md-card>

    </div>



    <div layout="row" layout-sm="column" layout-xs="column">
      <div layout="column" flex-gt-sm="70" flex-order="1" flex-order-xs="2" flex-order-sm="2">
        <!-- THE KPIs -->
        <div layout="row" layout-xs="column" layout-wrap layout-align="space-between center" class="kpi-row">

          <div flex-gt-md="33" flex-gt-xs="50" class="service-wrapper kpi" layout-wrap>
            <md-card layout-align="center center" class="kpi">
              <md-card-title layout="column" layout-align="center center" style="width:100%;">
                <span class="md-display-1">{{vm.eventSuccessKpi.value}}% </span>
              </md-card-title>
              <md-card-title-media class="icon">
                <div class="md-media-sm card-media">
                  <ng-md-icon icon="{{vm.eventSuccessKpi.icon}}" ng-style="{'fill':vm.eventSuccessKpi.color}" size="50">
                  </ng-md-icon>
                </div>
              </md-card-title-media>
              <md-card-content layout="column" layout-align="center center">
                <span class="md-title">成功率</span>
              </md-card-content>
            </md-card>
          </div>

          <div flex-gt-md="33" flex-gt-xs="50" class="kpi" layout-wrap>
            <md-card layout-align="center center">
              <md-card-title layout="column" layout-align="center center" style="width:100%;">
                <span class="md-display-1">{{vm.flowRateKpi.value}}/sec </span>
              </md-card-title>
              <md-card-title-media class="icon">
                <div class="md-media-sm card-media">
                  <ng-md-icon icon="{{vm.flowRateKpi.icon}}" ng-style="{'fill':vm.flowRateKpi.color}" size="50">
                  </ng-md-icon>
                </div>
              </md-card-title-media>
              <md-card-content layout="column" layout-align="center center">
                <span class="md-title">传入流量</span>
              </md-card-content>
            </md-card>
          </div>

          <div flex-gt-md="33" flex-gt-xs="50" class="kpi" layout-wrap>
            <md-card layout-align="center center">
              <md-card-title layout="column" layout-align="center center" style="width:100%;">
                <span class="md-display-1">{{vm.avgDurationKpi.value}}</span>
              </md-card-title>
              <md-card-title-media class="icon">
                <div class="md-media-sm card-media">
                  <ng-md-icon icon="{{vm.avgDurationKpi.icon}}" ng-style="{'fill':vm.avgDurationKpi.color}" size="50">
                  </ng-md-icon>
                </div>
              </md-card-title-media>
              <md-card-content layout="column" layout-align="center center">
                <span class="md-title">流量持续时间</span>
              </md-card-content>
            </md-card>
          </div>
        </div>
        <!-- END KPIs -->

        <div>
          <md-card layout-align="start start" style="margin-left: 0px;margin-right: 0px;">
            <span class="card-title kpi-header layout-padding-left">流量</span>
            <span class="md-caption kpi-subtitle layout-padding-top layout-padding-left">监测管道流量</span>
            <md-card-content style="width:100%;">
              <nvd3 options="vm.feedChartOptions" data="vm.feedChartData" api="vm.feedChartApi"></nvd3>

            </md-card-content>
          </md-card>
        </div>


        <div>
          <md-card layout-align="center center" style="margin-left: 0px;margin-right: 0px;">
            <span class="card-title kpi-header">管道处理器指标</span>
            <md-card-content style="width:100%;">
              <md-input-container class="md-block layout-padding-top-bottom">
                <label class="md-container-ignore label-small layout-padding-top">处理器 度量</label>
                <md-select ng-model="vm.selectedProcessorStatisticFunction" ng-change="vm.onProcessorChartFunctionChanged()" aria-label="Rule Type">
                  <md-option value="{{opt}}" ng-repeat="opt in vm.processorStatsFunctions">{{ opt }}</md-option>
                </md-select>
              </md-input-container>
              <div flex layout="row" layout-align="start end">
                <span flex></span>
                <span flex="20" ng-if="vm.showProcessorChartLoading">
          <md-progress-linear md-mode="indeterminate"></md-progress-linear>
        </span>
              </div>
              <nvd3 flex options="vm.processorChartOptions" data="vm.processorChartData" api="vm.processorChartApi" config="{deepWatchOptions:true}"></nvd3>

            </md-card-content>
          </md-card>
        </div>


      </div>

      <div flex-gt-sm="30" flex-order="2" flex-order-xs="1" flex-order-sm="1" class="layout-padding-left">
        <card-layout class="right-card">
          <header-section>
            <div layout="column">
              <div class="card-title right-card-title-text">管道详情</div>
            </div>
            <div layout="column">
              <span class="item-title" class="layout-padding-top-bottom">{{vm.feedName}}</span>
            </div>
          </header-section>
          <body-section>
            <div>
              <md-divider></md-divider>
              <md-list layout-fill layout="column" class="list-item-table">

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">状态</span>
                        <span class="item-title" ng-class="{'healthy':vm.feed.displayStatus == 'COMPLETED' || vm.feed.displayStatus =='RUNNING'}">
                         {{vm.feed.displayStatus}}</span>
                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">流开始</span>
                    <span class="item-title">{{vm.summaryStatistics.flowsStarted | number}}</span>
                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">流完成</span>
                    <span class="item-title">{{vm.summaryStatistics.flowsFinished | number}}</span>
                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">流运行</span>
                    <span class="item-title">{{vm.summaryStatistics.flowsRunning | number}}</span>

                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">流量</span>
                    <span class="item-title">{{vm.summaryStatistics.flowsStartedPerSecond | number}} / sec</span>
                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">流量持续时间</span>
                    <span class="item-title">{{vm.avgDurationKpi.value}}</span>
                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="item-column md-list-item-text ">
                    <span class="column-title column-title-bottom">成功的事件</span>
                    <span class="item-title">{{vm.eventSuccessKpi.value }}%</span>
                  </div>
                  <md-divider></md-divider>
                </md-list-item>

                <md-list-item>
                  <div layout="column" class="layout-padding-top-bottom layout-padding-left-right"  layout-align="space-between start">
                    <div class="md-subheader layout-padding-bottom">管道管理</div>
                    <span class="layout-padding-bottom">
                       <a href ng-click="vm.gotoFeedDetails($event)"> 管道详情</a>
                    </span>
                  </div>
                </md-list-item>





              </md-list>
            </div>
          </body-section>
        </card-layout>
      </div>

    </div>


  </div>
  <div ng-if="!vm.dataLoaded" class="kpi-loading" layout-align="center center" layout="column">
    <md-progress-circular md-mode="indeterminate" md-diameter="60"></md-progress-circular>
  </div>
</div>
